<template>
  <div class="order-detail-box">
    <div>
      <s-header :name="'订单详情'" @callback="close"></s-header>
      <div class="order-status">
        <div class="status-item">
          <label>支付状态：</label>
          <span>{{ detail.pay_status_name }}</span>
        </div>
        <div class="status-item">
          <label>支付时间：</label>
          <span>{{ pay_time.substring(0,10) }}  {{ pay_time.substring(11,19) }}</span>
        </div>
        <div class="status-item">
          <label>订单状态：</label>
          <span>{{ detail.order_status_name }}</span>
        </div>
        <div class="status-item">
          <label>订单编号：</label>
          <span>{{ detail.order_form }}</span>
        </div>
        <div class="status-item">
          <label>下单时间：</label>
          <span>{{ created_time.substring(0,10) }} {{ created_time.substring(11,19) }}</span>
        </div>
      </div>
      <div class="order-price">
        <div class="price-item">
          <label>商品金额：</label>
          <span>¥ {{ detail.order_total_amount }}</span>
        </div>
        <div class="price-item">
          <label>配送方式：</label>
          <span>普通快递</span>
        </div>
        <div class="price-item">
          <label>配送地址：</label>
          <span>{{ addr_info.addr_province_name }}
            {{ addr_info.addr_city_name }}
            {{ addr_info.addr_region_name }}
            {{ addr_info.addr_detail_address }}</span>
        </div>
        <div class="price-item">
          <label>收件人：</label>
          <span>{{ addr_info.addr_name }}</span>
        </div>
      </div>

      <div  v-for="(item, index) in commodity_list" :key="index">
        <van-card
          :key="item.id"
          style="background: #fff"
          :num="detail.order_goods[index].buy_num"
          :price="item.real_price"
          :desc="item.goods_default"
          :title="item.goods_name"
          :thumb="prefix(item.goods_img)"
        />
      </div>
      <div v-if="order_status">
        <van-button round block type="info" color="#1baeae" native-type="submit" @click="back_order_button">完成</van-button>
      </div>
      <div v-else>
        <van-button round block type="info" color="#1baeae" native-type="submit" @click="clear_order">结算</van-button>
      </div>
      <van-popup
        v-model="showPay"
        position="bottom"
        :style="{ height: '24%' }"
      >
        <div :style="{ width: '90%', margin: '0 auto', padding: '20px 0' }">
          <van-button :style="{ marginBottom: '10px' }" color="#1989fa" block @click="payOrder(detail.orderNo, 1)">
            支付宝支付
          </van-button>
          <van-button color="#4fc08d" block @click="payOrder(detail.orderNo, 2)">微信支付</van-button>
        </div>
      </van-popup>
    </div>
    <div class="center bacd_order">
      <div class="study">
        <span></span>
      </div>
    </div>
  </div>
</template>

<script>
import sHeader from '@/components/SimpleHeader'
import {cancelOrder, confirmOrder, payOrder} from '../service/order'
import {Dialog, Toast} from 'vant'

export default {
  components: {
    sHeader,
  },
  data() {
    return {
      detail: {},
      showPay: false,
      commodity_list: [],
      goods_num: [],
      order_status:true,
      created_time: '',
      pay_time: '',
      addr_info: {},
    }
  },
  mounted() {
    this.init()
  },
  created() {
    this.order_id = this.$route.params.id
    this.$axios.get(this.$settings.BASE_URL + 'orderform/order/' + this.order_id + '/').then(res => {
      this.detail = res
      this.addr_info = res.addr_info
      this.created_time = res.created_time
      this.pay_time = res.pay_time
      this.commodity_list = res.commodity_list
      this.goods_num = res.order_goods
      if(res.pay_status_name=='未支付'){
        this.order_status = false
      }
    })
  },
  methods: {
    async init() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true
      });
      Toast.clear()
    },
    cancelOrder(id) {
      Dialog.confirm({
        title: '确认取消订单？',
      }).then(() => {
        cancelOrder(id).then(res => {
          if (res.resultCode == 200) {
            Toast('删除成功')
            this.init()
          }
        })
      }).catch(() => {
        // on cancel
      });
    },
    back_order_button() {
      this.$router.push({path: `/order/`})
    },
    confirmOrder(id) {
      Dialog.confirm({
        title: '是否确认订单？',
      }).then(() => {
        confirmOrder(id).then(res => {
          if (res.resultCode == 200) {
            Toast('确认成功')
            this.init()
          }
        })
      }).catch(() => {
        // on cancel
      });
    },
    showPayFn() {
      this.showPay = true
    },
    async payOrder(id, type) {
      Toast.loading
      await payOrder({orderNo: id, payType: type})
      this.showPay = false
      this.init()
    },
    close() {
      Dialog.close()
    },
    clear_order(){
      open(this.detail.url, '_self' )
    }
  }
}
</script>

<style lang="less" scoped>
.btn {
  position: fixed;
  bottom: 20px;
}

.order-detail-box {
  background: #f7f7f7;

  .order-status {
    background: #fff;
    margin-top: 44px;
    padding: 20px;
    font-size: 15px;

    .status-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {
      }
    }
  }

  .bacd_order {
    height: 60px;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    padding-top: 400px;

  }

  .order-price {
    background: #fff;
    margin: 20px 0;
    padding: 20px;
    font-size: 15px;

    .price-item {
      margin-bottom: 10px;

      label {
        color: #999;
      }

      span {

      }
    }
  }

  .study {
    padding: 25px 40px;
  }

  .study span {
    display: block;
    width: 140px;
    height: 42px;
    text-align: center;
    line-height: 42px;
    cursor: pointer;

    border-radius: 6px;
    font-size: 16px;
    color: #fff;
  }

  .van-card {
    margin-top: 0;
  }

  .van-card__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
